<template>
  <MainContent title="积分明细" back>
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <!-- <el-form-item label="手机号">
            <el-input
              v-model="tableForm.phone"
              clearable
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="积分类型">
            <el-select v-model="tableForm.type" class="m-2" placeholder="请选择积分类型">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="searchTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="defaultTime2"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="setintegralState('增加', 0)"
              >增加积分</el-button
            >
            <el-button type="primary" @click="setintegralState('扣减', 2)"
              >扣减积分</el-button
            >
            <el-button type="primary" @click="setintegralState('消耗', 1)"
              >消耗积分</el-button
            >
          </el-form-item>
        </template>
      </SearchBar>
    </template>
    <div class="integral-statistical">累计消耗积分：{{integralObj.use || 0}} 累计获取积分：{{integralObj.receive || 0}} 剩余积分：{{integralObj.available || 0}}</div>
    <LayoutTable
      ref="marketingModel"
      url="/community/back/currency/currencyDetail"
      :setSearch="setSearch"
      disable-auto-height
      :param="tableForm"
    >
      <el-table-column
        prop="type"
        label="状态"
        min-width="100"
      >
        <template #default="scope">
          {{ typeObj[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column
          prop="amount"
          label="数量"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          min-width="200"
        ></el-table-column>
      <el-table-column prop="createTime" label="时间" min-width="100">
        <template #default="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>
    </LayoutTable>

    <AddIntegral :integralState="integralState" :modelData="modelData" @confirm="confirm" @cancel="cancel"></AddIntegral>
  </MainContent>
</template>
<script lang="ts" setup>
import integralApi from "@/api/integralApi.js";
import AddIntegral from "./component/addIntegral.vue";
import { dateFormat } from "@/utils/filters";
const route = useRoute();
const integralState = ref(false) 
const modelData = ref({
  title: '积分增加',
  type: 0,
  userId: route.params.userId
})

const searchTime = ref([]);
const tableForm = ref({
  // phone: "",
  type: '',
  startTime: "",
  endTime: "",
  userId: route.params.userId
});
const typeObj = ref({
  0: '获取',
  2: '扣减',
  1: '消耗',
})
const typeList = ref([
  { id: '', name: "全部" },
  { id: 0, name: "获取" },
  { id: 2, name: "扣减" },
  { id: 1, name: "消耗" },
]);
const integralObj = ref({
  available: 0,
  receive: 0,
  use: 0,
})
watch(
  () => searchTime.value,
  (val) => {
    if (val !== null) {
      tableForm.value.startTime = String(new Date(val[0]).getTime());
      tableForm.value.endTime = String(new Date(val[1]).getTime());
    } else {
      tableForm.value.startTime = "";
      tableForm.value.endTime = "";
    }
 
  }
);

const defaultTime2 = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]; // '12:00:00', '08:00:00'
const setSearch = ref(Number());
const marketingModel = ref();
// 设置积分操作的弹窗
const setintegralState = (title:any, type: any)=> {
  modelData.value.title = title
  modelData.value.type = type
  integralState.value = true
}
// 获取积分统计
const getStatistics = async()=> {
  let rs = await integralApi.getStatistics({id: tableForm.value.userId})
  if(rs.code === 200) {
    integralObj.value = rs.payload
    
  }

}

const confirm = ()=>{
  getStatistics()
  onSearch()
  cancel()
}
const cancel = ()=> {
  integralState.value = false
}
const onSearch = () => {
  setSearch.value++;
};
onMounted(() => {
  getStatistics();
});
</script>

<style lang="scss" scoped>
.integral-statistical {
  margin-bottom: 20px
}
</style>
